<template>
<div class="content">
   <Button type="info" class="btn" @click="addwater">添加水印</Button>
   <Button type="info" class="btn" @click="addbackgroup">添加背景</Button>

  <Dropdown class="select" @on-click="chooseresolution">
    <Button  class="chooseBtn">
      分辨率选择
    <Icon type="ios-arrow-down"></Icon>
    </Button>
    <DropdownMenu slot="list">
    <DropdownItem name="1" :selected="resolutionselect==1">VGA</DropdownItem>
    <DropdownItem name="2" :selected="resolutionselect==2">720p</DropdownItem>
    <DropdownItem name="3" :selected="resolutionselect==3">1080p</DropdownItem>
    </DropdownMenu>
  </Dropdown>


  <Dropdown class="select" @on-click="choosemaxbirtate">
    <Button  class="chooseBtn">
      码率选择
      <Icon type="ios-arrow-down"></Icon>
      </Button>
      <DropdownMenu slot="list">
      <DropdownItem name="2000" :selected="maxBitrate==2000">2M</DropdownItem>
      <DropdownItem name="1500" :selected="maxBitrate==1500">1.5M</DropdownItem>
      <DropdownItem name="1000" :selected="maxBitrate==1000">1M</DropdownItem>
      <DropdownItem name="768" :selected="maxBitrate==768">768kbps</DropdownItem>
      <DropdownItem name="512" :selected="maxBitrate==512">512kbps</DropdownItem>
      <DropdownItem name="384" :selected="maxBitrate==384">384kbps</DropdownItem>
      </DropdownMenu>
  </Dropdown>


  <Button type="info" class="btn2" @click="close">确定</Button>


</div>
</template>

<script>
    export default {
        name: "Settings",
        data(){
          return{
             resolution: {
               width: 640,
               height: 480
             },
            resolutionselect:1,
            maxBitrate:512,
          }
        },
        methods:{

          /*关闭*/
          close(){
            this.$emit('close');
          },

          addwater(){
            this.$emit('addwater');
          },
          addbackgroup(){
            this.$emit('addbackgroup');
          },
          /*坐席设置最大分辨率*/
          chooseresolution(value){
            console.log(value);
            localStorage.setItem('resolutionType',value);
            if (value == 1){
              this.resolution = {
                width: 640,
                height: 480
              }
            }else if (value == 2){
              this.resolution = {
                width: 1280,
                height: 720
              }
            }else if (value == 3){
              this.resolution = {
                width: 1920,
                height: 1080
              }
            }
            this.resolutionselect = value;
            this.$emit('setresolution',this.resolution);
          },

          choosemaxbirtate(value){
            console.log(value);
            this.maxBitrate = parseInt(value);
            this.$emit('setbirtate',this.maxBitrate);
          },

        }
    }
</script>

<style scoped>

  .content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;

    width:200px;
    height:280px;
    background:rgba(255,255,255,1);
    box-shadow:5px 7px 49px 5px rgba(44,137,234,0.13);
  }

  .btn{
    width: 90%;
    height: 30px;
    line-height: 20px;
    background:rgba(102,172,244,1);
    color:rgba(255,255,255,1);
    margin-top: 10px;
    margin-left: 5%;
  }

  .select{
    width: 90%;
    height: 30px;
    margin-top: 10px;
    /*margin-left: 5%;*/
  }

  .chooseBtn{
    width: 100%;
    height: 30px;
    line-height: 20px;
    background:rgba(102,172,244,1);
    color:rgba(255,255,255,1);
    /*margin-top: 10px;*/
    margin-left: 5%;
  }

  .btn2{
    width: 90%;
    height: 30px;
    line-height: 20px;
    margin-left: 5%;
    color:rgba(255,255,255,1);
    background:rgba(102,172,244,1);
    margin-top: 70px;
  }

</style>
